cosette/pages/c/[cosetta].vue

<script setup>
  const route = useRoute()

  let { cosetta, comments } = reactive(await $fetch(`/api/cosetta/${route.params.cosetta}`))

  const comment = reactive({ cosetta_uuid: route.params.cosetta, message: '' })
  const addComment = async () => {
    const ret = await $fetch(`/api/comment`, { method: 'POST', body: { ...comment } })
    comment.message = ''
    comments.unshift(ret.comment)
  }

</script>
<template>
  <section class="bg-white py-8">

    <div class="container mx-auto pt-4 pb-12">
      <img v-if='cosetta.images' :src="`/src/public/${cosetta.images[0]}`"/>
      <h3 class='uppercase mt-4 font-bold text-xl'>{{cosetta.name}}</h3><br/>
      <p class='pt-1 text-gray-700 text-xl'>{{cosetta.description}}</p>
      <span class="badge mr-1" v-for='(tag, idx) in cosetta.tags' :key='idx' v-text='tag'></span>
    </div>

    <div class="container mx-auto">
      <p class="font-bold text-xl uppercase">chiacchiere</p>
      <div class='form-control'>
        <div class='input-group'>
          <input v-model='comment.message' class="input input-bordered w-full text-sm" @keypress:enter="addComment"/>
          <button class="btn btn-success" @click='addComment'>Invia</button>
        </div>

        <div class='mt-2' v-for='comment in comments' :key='comment.uuid'>
          <span class="label-text-alt" v-text='comment.updatedAt'/>
          <div class="alert" v-text='comment.message'/>
        </div>
      </div>
    </div>
  </section>
</template>